import React,{useState,useEffect} from 'react'
import {Select,Input,Button,DatePicker ,Space,Table,Divider,Pagination ,Radio ,Drawer ,Form,Checkbox,message  } from 'antd'
import {connect,useDispatch,useSelector} from "react-redux"
import RoleAddModal from './sub/RoleAddModal.jsx'

const { RangePicker } = DatePicker

const columns = [
    {
      title: '角色',
      dataIndex: 'roleName',
    },
     {
      title: '描述',
      dataIndex: 'remark',
    },
      {
      title: '创建时间',
      dataIndex: 'createTime',
    },
      {
      title: '修改时间',
      dataIndex: 'modifyTime',
    },  
    {
      title: '操作',
     }
  ];
export default function Role() {
    //模态框开始
    const [visible, setVisible] = useState(false);
    const showDrawer = () => {
        setVisible(true);
      };
      const onClose = () => {
        setVisible(false);
      };
    //模态框结束
    const [searchOn,setSearchOn]=useState({})

    const dispatch = useDispatch()
    //获取仓库数据
    const result =useSelector(state=>state.userRc)


    const [selectionType, setSelectionType] = useState('checkbox');
      //复选框选中哪些要删除
    const [delDatas,setDelDatas]=useState([])

    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
          setDelDatas(selectedRowKeys)
        },
        getCheckboxProps: (record) => ({
          disabled: record.name === 'Disabled User',
          // Column configuration not to be checked
          name: record.name,
        }),
      };
          //切换每页显示多少时触发
    const showPz =(current,size)=>{
        dispatch({
            type:'getRole',
            payload:{pageSize:size,pageNum:current}
          })
     
    }
        //点击那一页的回调
    const showChangPz = (page,pageSize)=>{
        dispatch({
            type:'getRole',
            payload:{pageSize:pageSize,pageNum:page}
          })
    }
    //一进来执行
    useEffect(()=>{
        getAllRole()
    },[])
    //获取所有角色信息
    const getAllRole = ()=>{
        dispatch({
            type:'getRole',
            payload:{pageSize:'10',pageNum:'1'}
          })
    }


     //输入用户名的回调
     const inputUser=(e)=>{
        setSearchOn({
          ...searchOn,
          roleName:e.target.value
        })
      }
      //选择日期的回调
      const inputTime=(value)=>{
        if(value){
          setSearchOn({
            ...searchOn,
            createTimeFrom:value[0]._d.toLocaleDateString().replaceAll('/','-'),
            createTimeTo:value[1]._d.toLocaleDateString().replaceAll('/','-')
          })  
        }else {
          setSearchOn({
            ...searchOn,
            createTimeFrom:'',
            createTimeTo:''
          }) 
        }
      }
      //查询
      const searchData=()=>{
        dispatch({
            type:'getRole',
            payload:searchOn
          })
      }
      //删除
      const delRole=()=>{
        dispatch({
          type:'delRole',
          payload:delDatas
        })
        message.success('删除成功')
        getAllRole()
      }
    return (
        <>
        {/* 头部区域 */}
        <div style={{marginBottom: '20px' }}>
        <label htmlFor="">角色：</label>
        <Input placeholder="请输入角色" style={{width:300}} onChange={inputUser}/>
        &nbsp; &nbsp;
        <label htmlFor="">创建时间：</label>
        <Space direction="vertical" size={12} >
            <RangePicker onChange={inputTime}  format='YYYY-MM-DD'/>
        </Space>
        &nbsp; &nbsp;
        <Button type="primary"  onClick={searchData}>查询</Button>
        </div>
        <Button onClick={showDrawer}>新增</Button>
        &nbsp; &nbsp;
        <Button  onClick={delRole}>删除</Button>
        {/* 表格区域 */}
        <Table
        style={{marginTop:'20px' }}
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        columns={columns}
        dataSource={result.role}
        rowKey='roleId'
        pagination={{
          total:result.totalRole,
          showTotal:(total, range) => `${range[0]}-${range[1]}条  共 ${total} 条记录`,
          defaultPageSize:10,
          defaultCurrent:1,
          onShowSizeChange:showPz,
          showSizeChanger:true,
          onChange:showChangPz,
          pageSizeOptions:[5,10,15,20]
        }}
      />   
        <Drawer title="新增角色" placement="right" onClose={onClose} visible={visible} >
        <RoleAddModal onClose={onClose} getAllRole={getAllRole}></RoleAddModal>
      </Drawer>
        </>
    )
}
